import { Glodon} from 'bimfacesdkloader';
import pointIcon from "@/assets/page-icon/adress.png";

// 创建所有标记点
export function createAllAreaMaker(viewer3D:any,worldPosition:any){
    // 初始化DrawableContainer
    const drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
    drawableConfig.viewer = viewer3D;
    const drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
    worldPosition.forEach((el:object)=>{
        createLabel(viewer3D,el,drawableContainer)
    })
}

function createLabel(viewer3D:any,markerInfo:any,drawableContainer:any){
    // 创建自定义元素，可以是一个dom element，也可以是个字符串
    let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
    let content = document.createElement('div');
    content.innerHTML = `<div style="display: flex;width:170px;height:fit-content;align-items: center;cursor: pointer;"><div style="width:50px;height:35px;"><img src="${pointIcon}" height="100%" width="100%" alt=""/></div><div style="background: #4a91e29e;color: #fff;width:100%;padding: 10px">${markerInfo.name}</div></div>`;
    config.content = content;
    config.viewer = viewer3D;
    config.worldPosition = {
        x:markerInfo.x,
        y:markerInfo.y,
        z:markerInfo.z
    };
    //生成customItem实例
    let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
    // 添加自定义标签
    drawableContainer.addItem(customItem);
}